<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

      <link rel="stylesheet" href="./css/ui-choose.css">
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-inline"  style="width: 200px;">
                    <select name="interest" lay-filter="aihao" name="parent_id" id="parent_id">
                        <option value="0">--无--</option>
                        <option value="菜单id">已有菜单列表</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单名</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" lay-verify="title" placeholder="请输入菜单名" autocomplete="off" class="layui-input" id="name" name="name">
                </div>
                <div class="layui-form-mid layui-word-aux">菜单名不能重复</div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">菜单路径</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" id="path" name="path" lay-verify="title" placeholder="请输入菜单路径" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">相对路径,若为一级菜单则留空</div>
            </div>


            <div class="layui-form-item">
                <label for="" class="layui-form-label">选择图标</label>
                <div class="layui-input-block">
                    <div class="demo-table">
                        <ul class="ui-choose" id="uc_01">
                            <!--<li><i class="layui-icon">&#xe679;</i></li>-->
                            <!--<li><i class="layui-icon">&#xe7ae;</i> </li>-->
                            <!--<li><i class="layui-icon">&#xe716;</i> </li>-->
                            <li><i class="layui-icon">&#xe653;</i> </li>
                            <li><i class="layui-icon">&#xe63c;</i> </li>
                            <li><i class="layui-icon">&#xe62d;</i> </li>
                            <li><i class="layui-icon">&#xe641;</i> </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input name="is_active" id="is_active_1" type="radio" value="1" checked="checked" title="启用"/>
                    <input name="is_active" id="is_active_0" type="radio" value="0" title="停用"/>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">菜单描述</label>
                <div class="layui-input-block">
                    <textarea id="desc" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" >
                        <button class="layui-btn" id="menu_add_btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });
          
          
        });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>